window.onload = function(){
	function getstyle(obj,attr){
		if(window.getComputedStyle){
			return window.getComputedStyle(obj,null)[attr];
		}
		return obj.currentStyle[attr];
	}
	
	//核心公式    小区域/大区域=小图/大图
	
	// 小区域= (小图/大图)*大区域
	
	
	//求出比例   小图/小区域=大图/大区域
	
	var middleImg = document.querySelector("#middleImg");
	var middleArea = document.querySelector("#middleArea");
	var bigArea = document.querySelector("#bigArea");
	var bigImg = document.querySelector("#bigImg");
	
	var oLi = document.querySelectorAll("#small li");
	
	middleArea.style.height = (parseInt(getstyle(middleImg,"height")) / parseInt(getstyle(bigImg,"height"))) * 
	parseFloat(getstyle(bigArea,"height")) + "px";
	
	middleArea.style.width = (parseInt(getstyle(middleImg,"width")) / parseInt(getstyle(bigImg,"width"))) * 
	parseFloat(getstyle(bigArea,"width")) + "px";
	
	var bili = parseFloat(getstyle(middleImg,"width")) / parseFloat(getstyle(middleArea,"width"))
	
	
	middleImg.onmouseenter = function(evt){
		var e = evt || window.event;
		var disX = e.clientX;
		var disY = e.clientY;
		
		middleArea.style.display = "block";
		bigArea.style.display = "block";
		
		document.onmousemove = function(evt){
			var e = evt || window.event;
			var mX = (e.clientX - middleImg.parentNode.offsetLeft - middleArea.offsetWidth );
			var mY = (e.clientY - middleImg.parentNode.offsetTop - middleArea.offsetHeight / 2);
			if(mX <= 0){
				mX = 0;
			}
			if(mY <= 0){
				mY = 0;
			}
			if(mX >= middleImg.offsetWidth - middleArea.offsetWidth){
				mX = middleImg.offsetWidth - middleArea.offsetWidth;
			}
			if(mY >= middleImg.offsetHeight - middleArea.offsetHeight){
				mY = middleImg.offsetHeight - middleArea.offsetHeight
			}
			
			middleArea.style.left = mX + "px";
			middleArea.style.top = mY + "px";
			
			bigImg.style.left = -mX * bili + "px";
			bigImg.style.top = -mY * bili + "px";
		}
	}
	
	middleImg.onmouseleave = function(){
		middleArea.style.display = "none";
		bigArea.style.display = "none";
		
		middleImg.onmousemove = null;
	}
	
	for(var i = 0;i < oLi.length;i++){
		oLi[i].tmpIndex = i;
		oLi[i].onclick = function(){
			var index = this.tmpIndex + 1;		
			middleImg.children[0].setAttribute("src","img/info/2_" + index + ".jpg")
			bigImg.setAttribute("src","img/info/1_" + index + ".jpg")
		}
	}
}